// 设置配置文件
const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports={

    // 设置要打包的文件
    entry:path.join(__dirname,'src/main.js'),
    // 设置输出文件相关的配置
    output:{
        filename:'bundle.js',// 这是指定 输出的文件的名称
        path:path.join(__dirname,'dist')  // 指定 打包好的文件，输出到哪个目录中去
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        }),
        new vueLoaderPlugin()
    ],
    module:{
        rules:[
            
            { test: /\.html$/,use: { loader: 'html-loader' }},
            { test:/\.css$/,use:[ "style-loader","css-loader" ] },
            // npm i less less-loader 
            { test:/\.less$/,use:[ "style-loader","css-loader","less-loader" ] },
            // npm i sass-loader node-sass -D
            { test:/\.scss$/,use:[ "style-loader","css-loader","sass-loader" ] },
            // limit 图片文件大于设定值 则不转换为Base64编码 小于 则转换为base64编码
            // name 设置 图片命名规则[hash:8]取8位随机值 [name]--原文件名 [ext]图片文件后缀名
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=10000&name=[hash:8]-[name].[ext]' },
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.vue$/, use: 'vue-loader' }
            // babel 下载的包 分为三块 作用 就是把高级语法转为低级语法
            // 1 核心文件 babel-core@6.26.0 bable-loader@7.1.2
            // 2 babel插件 babel-plugin-transform-runtime
            // 3 要编译的语法 babel-preset-env babel-preset-stage-0
        ]
    }
}


// 1.在内存中生成inde.html 自动帮我们引入 webpack-dev-server打包成的内存中的main.js
// 2.当修改html内容的时候 可以触发重新打包
// 3.最终项目要发布的时候 webpack可以支持打包html文件


// webpack-dev-server 
// html-webpack-plugin
// 主要体现在开发的过程中
// devserver 可以支持保存文件 自动打包 打包生成文件 不会在物理磁盘中出现而是生成在内存中
// html-webpack-plugin 可以让webpack支持打包html 同时修改html的时候 devserver也可以自动打包项目了

// 这两插件 一个在内存中生成虚拟的js文件 一个在内存中生成虚拟的html文件 我在开发的时候没有问题 可以正常运行 那么我怎么发布到服务器？？

// 发布 ----- 运行 webpack 会自动把虚拟的js 与 html 生成到 dist目录 下 变成 实际存在的
// 项目分为 开发 与 上线 